<template>
    <div class="baseinfo-form">
        <el-form
            :rules="rules"
            ref="elForm"
            :model="menuForm"
            label-width="80px"
            :validate-on-rule-change="false"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="F_Name" label="功能名称">
                        <el-input placeholder="请输入功能名称" size="small" v-model="menuForm.F_Name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="F_Icon" label="功能图标">
                        <el-input
                            placeholder="请选择功能图标"
                            size="small"
                            v-model="menuForm.F_Icon"
                            suffix-icon="el-icon-more"
                            @focus="openDialog"
                            ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="F_Type" label="功能分类">
                        <el-select
                            v-model="menuForm.F_Type"
                            placeholder="==请选择=="
                            size="small"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in menuTree"
                                :key="item.F_ItemValue"
                                :label="item.F_ItemName"
                                :value="item.F_ItemValue"
                            ></el-option>
                         </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="F_SortCode" label="排序">
                        <el-input placeholder="请输入排序号" size="small" type="number" v-model="menuForm.F_SortCode"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item prop="F_Url" label="功能路径">
                        <el-input placeholder="请输入功能地址" size="small" v-model="menuForm.F_Url"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 功能图标弹出框 -->
        <el-dialog
            v-dialogDrag
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="80%"
            append-to-body
            :close-on-click-modal="false"
            @closed="closeDialog"
            class="dialog-box"
        >
            <SelectIcon v-if="dialogVisible" @childByValue="chageIcon"></SelectIcon>
        </el-dialog>
    </div>
</template>

<script>
import SelectIcon from "@/views/FontAwesome";
import { getAppFunc, getDictCateByCode } from "@/api/language/dictionary";
import {
    addFunc,
    updateFunc,
} from "@/api/organization/mobileFunc";
import { validateLength, validateMobSort } from '@/api/organization/validateFunc';
export default {
    name: "AddMobileFunc",
    props: {
        FuncId: {
            type: String,
        },
        funcType: {
            type: Number,
        },
        menuForm: {
            type: Object,
            default: function () {
                return {
                    F_Name: "",
                    F_Type: null,
                    F_TypeName: null,
                    F_SortCode: "",
                    F_Url: "",
                    F_Icon: "",
                };
            },
        },
        menuTree: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    components: {
        SelectIcon
    },
    data() {
        return {
            dialogVisible: false,
            rules: {
                F_Name: [
                    { required: true, message: '请输入功能名称', trigger: "blur" },
                    { validator: validateLength,trigger:'change'}
                ],
                F_Url: [
                    { required: true, message:'请输入功能地址', trigger: "blur" },
                    { validator: validateLength,trigger:'change'}
                ],
                F_Type: [
                    { required: true, message:'请选择功能分类', trigger: "change" },
                ],
                F_SortCode: [
                    { validator: validateMobSort, trigger:'change'}
                ]
            },
        };
    },
    async created() {
        await this.getAppFunc("function");
    },
    methods: {
        //获取菜单树
        async getAppFunc(itemCode) {
            let res = await getAppFunc(itemCode);
            if(res&&res.data.success){
                this.menuTree = res.data.data;
            }
        },
        async userFormSubmit(callback) {
            this.valid = this.validateData();
            if (this.valid) {
                try {
                if (this.FuncId) {
                // 修改
                let result = await updateFunc(this.FuncId, this.menuForm);
                    let res = result.data;
                    if (res.success) {
                    if (callback) {
                        callback(res.data);
                    }
                    }
                
                } else {
                // 添加
                let result = await addFunc(this.menuForm);    
                    let res = result.data;
                    if (res.success) {
                    if (callback) {
                        callback(res.data);
                    }
                    } else {
                    this.$notify({
                        title:this.$t('deletePrompt.promptTitle'),
                        message: this.$t('workFlow.addStamp.hintAddFailure'),
                        type: "success",
                    });
                    }
                    
                }
                } catch (error) {
                
                }
                
            }
    },
        openDialog() {
            this.dialogTitle = this.$t("workFlow.Process.functionIcon");
            this.dialogVisible = true;
        },
        closeDialog() {
            this.dialogVisible = false;
        },
        chageIcon(val) {
            this.menuForm.F_Icon = val;
            this.dialogVisible = false;
        },
        /* 提交表单 */
        validateData() {
            let flag = false;
            this.$refs["elForm"].validate((valid) => {
                flag = valid;
            });
            return flag;
        },
    }
}
</script>